<template>
    <div class="addShortMessage">
        <div class="topNav">
            <el-divider class="topLine"><i class="lineIcon el-icon-document-copy"></i><span
                    class="lineTitle" id="optionShortMessage">发送短信</span></el-divider>
        </div>
        <div class="shortMessageSetNav">
        </div>
        <div class="addContent">
            <!--开启表单验证：:rules="rules" ref="moudle" 表单右侧验证符号 status-icon -->
            <el-form :model="shortMessage" status-icon :rules="rules" label-width="100px" ref="shortMessage"
                     :label-position="labelPosition">

                <el-form-item label="接收人姓名" prop="name">
                    <el-input id="name" class="inputLine" v-model="shortMessage.name"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="mobile">
                    <el-input id="mobile" class="inputLine" v-model="shortMessage.mobile"></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="code">
                    <el-input id="code" class="inputLine" v-model="shortMessage.code" disabled></el-input>
                </el-form-item>


                <el-form-item label="发送内容" prop="content">
                    <el-input id="content" type="textarea" :rows="2" maxlength="20" show-word-limit class="inputCoreDesc" v-model="shortMessage.content"></el-input>
                </el-form-item>

                <el-form-item label="用途" prop="use">
                    <el-select id="status" class="inputLine" v-model="shortMessage.use" placeholder="请选择" disabled>
                        <el-option
                                v-for="item in SHORT_MESSAGE_USE"
                                :key="item.key"
                                :label="item.value"
                                :value="item.key"
                                :disabled="item.disabled">
                        </el-option>
                    </el-select>
                </el-form-item>

                <!--<el-form-item label="状态" prop="status">
                    <el-select id="status" class="inputLine" v-model="shortMessage.status" placeholder="请选择" disabled>
                        <el-option
                                v-for="item in status"
                                :key="item.key"
                                :label="item.value"
                                :value="item.key"
                                :disabled="item.disabled">
                        </el-option>
                    </el-select>
                </el-form-item>-->

                <!--<el-form-item label="生效时间" prop="times">
                    <el-input id="times" class="inputLine" v-model="shortMessage.times"></el-input>
                </el-form-item>-->

                <el-form-item>
                    <!--这里save(formName)方法保存，ref别名的shortMessage-->
                    <el-button id="submitBtn" type="primary" @click="save('shortMessage')">立即创建</el-button>
                    <el-button @click="resetForm('shortMessage')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        name: "AddShortMessage",
        props: {
            list: {
                type: Function,
                default: null
            },
        },
        data() {
            let mobileValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }

                if (value === '') {
                    callback(new Error("手机号不能为空"));
                } else if (getLength(value) < 2) {
                    callback(new Error("手机号长度至少3位"));
                } else {
                    callback();
                }
            }
            let contentValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }

                if (value === '') {
                    callback(new Error("发送内容不能为空"));
                } else if (getLength(value) < 2) {
                    callback(new Error("发送内容长度至少3位"));
                } else {
                    callback();
                }
            }

            return {
                message: '这里是更新短信管理表页面',
                shortMessage: {
                    uniId: '',
                    mobile: '',
                    code: '',
                    content: '',
                    use: '',
                    status: '',
                    times: '',
                },
                labelPosition: 'left',

                rules: {
                    mobile: [
                        {validator: mobileValidate, trigger: 'blur'}
                    ],
                    content: [
                        {validator: contentValidate, trigger: 'blur'}
                    ],


                },
                options: VIDEO_TYPE,
                charge: VIDEO_CHARGE,
                isShow: YES_OR_NO,
                level: LEVEL,
                status: STATUS,
                moduleTypes: MODULE_TYPE,
                SHORT_MESSAGE_USE:SHORT_MESSAGE_USE,
                SHORT_MESSAGE_STATUS:SHORT_MESSAGE_STATUS,
            }
        },
        mounted() {
            if (this.$route.params.shortMessage != null) {
                this.shortMessage = this.$route.params.shortMessage;
                let optionShortMessage = document.getElementById("optionShortMessage");
                let submitBtn = document.getElementById("submitBtn");
                optionShortMessage.innerHTML = '更新短信管理表';
                submitBtn.innerHTML = "立即更新";
            }else{
                this.shortMessage.use=SHORT_MESSAGE_USE.SERVICE.key;
                this.shortMessage.status=SHORT_MESSAGE_STATUS.USED.key;
            }
        },
        methods: {

            //1.新增短信管理表
            save(formName) {
                let _this = this;
                let responseMsg = '';
                //前端校验
                this.$refs[formName].validate((valid) => {
                    if (valid) {

                        this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/shortMessage/send', this.shortMessage)
                            .then((response) => {
                                let resp = response.data;
                                responseMsg = response;

                                if (resp.success) {
                                    this.$router.push("/source/shortMessage/set");
                                    //引入全局变量toast提示
                                    toast.success("保存成功", "bottom-end");
                                } else {
                                    this.$notify({
                                        title: '填写内容错误',
                                        message: resp.responseMsg,
                                        position: "top-right",
                                        type: 'warning',
                                        offset:200,
                                    });
                                }
                            })
                    } else {
                        this.$notify({
                            title: '填写内容错误',
                            message: '请按照提示内容填写正确信息',
                            position: "top-right",
                            type: 'warning'
                        });
                        return false;
                    }
                });

            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            //SEO标签
            handleClose(tag) {
                this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
            },
            showInput() {
                this.inputVisible = true;
                this.$nextTick(_ => {
                    this.$refs.saveTagInput.$refs.input.focus();
                });
            },
            handleInputConfirm() {
                let inputValue = this.inputValue;
                if (inputValue) {
                    this.dynamicTags.push(inputValue);
                }
                this.inputVisible = false;
                this.inputValue = '';
            },
            //级联选择器
            handleChange(value) {
                console.log(value);
            },
            //文件上传
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
        },
    }
</script>

<style scoped>
    /*顶部line样式*/
    .topNav {

    }

    /deep/ .el-divider__text {
        background-color: #1d7dd6;
        padding: 8px 20px;
    }

    .topLine {
        background-color: #1d7dd6;
    }

    .lineIcon {
        font-size: 22px;
        color: #ffffff;
        position: relative;
        margin-right: 5px;
    }

    .lineTitle {
        position: relative;
        font-size: 16px;
        color: #ffffff;
    }

    /*短信管理表设置导航*/
    .shortMessageSetNav {
        max-width: 400px;
        margin: 5px auto;

    }

    .shortMessageSetNavTile {
        cursor: pointer;
    }

    /*内容区位置*/
    .addContent {
        margin-left: 5%;
        margin-top: 35px;
        margin-right: 5%;
    }

    /deep/ .el-form-item {
        margin-bottom: 5px;
    }

    /*输入行控制*/
    .inputLine {
        max-width: 350px;
        float: left;
    }

    /*关键字标签*/
    .el-tag + .el-tag {
        margin-left: 10px;
    }

    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }

    .titleLeft {
        float: left;
    }

    /*SEO描述*/
    .textAreaWidth {
        max-width: 400px;
        float: left;
    }

    /*图片上传：取消upload打开的input默认按钮*/
    /deep/ input[type=file] {
        display: none;
    }

    /*错误提示*/
    #shortMessageTitle {
        float: left;
    }

    /deep/ .el-form-item__error {
        float: left;
        position: relative;
        line-height: 30px;
        margin-left: 10px;
    }

    /*提示框的字符颜色*/
    /deep/ .el-input__prefix, .el-input__suffix {
        color: #44cd3f;
        font-size: 18px;
    }

    /deep/ .el-input__icon {
        color: #44cd3f;
        font-size: 18px;
    }

    /*是否显示*/
    /deep/ .el-switch {
        line-height: 40px;
    }

    /*头像上传：如果没有可删除，picList*/
    .avatar-uploader {
        float: left;
    }

    .avatar-uploader {
        border: 1px dashed #a8a2a2;
        border-radius: 6px;
        cursor: pointer;
        overflow: hidden;
        text-align: center;
    }

    .avatar-uploader:hover {
        border-color: #409EFF;
    }

    .avatar-uploader:hover .avatar-uploader-icon {
        color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 60px;
        height: 60px;
        line-height: 60px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
    .inputCoreDesc {
        max-width: 350px;
        float: left;
    }
</style>